<script setup>
import FormItemSearch from '@/components/form/FormItemSearch.vue'
import TableColumnIndex from '@/components/table/TableColumnIndex.vue'
import { usePagination } from '@/hooks'
import {} from '@/api'

const title = computed(() => useRoute().meta.title ?? '充值记录')

const { total, pageSize, currentPage, pageSizes } = usePagination({
  onChange: (type, value) => {
    console.log(type, value)
  }
})

const tableData = ref([])

const form = ref({
  name: '',
  phone: '',
  date: ''
})

async function getData() {
  // const { data } = await userLoggingApi.list({
  //   ...form.value,
  //   page: currentPage.value,
  //   limit: pageSize.value,
  // })
  // tableData.value = data.list
  // total.value = data.total
}

function search() {
  currentPage.value = 1
  getData()
}

const formRef = ref()
function reset() {
  formRef.value.resetFields()
  search()
}

getData()
</script>

<template>
  <div>
    <el-card shadow="never">
      <template #header> {{ title }} </template>
      <el-form
        ref="formRef"
        :model="form"
        label-width="90px"
        label-suffix="："
        label-position="left"
        @submit.prevent="search"
      >
        <el-row :gutter="20">
          <FormItemSearch label="用户名" prop="name">
            <el-input v-model.trim="form.name" clearable />
          </FormItemSearch>
          <FormItemSearch label="手机号" prop="phone">
            <el-input v-model.trim="form.phone" clearable />
          </FormItemSearch>
          <FormItemSearch label="充值时间" prop="date">
            <el-date-picker
              v-model="form.date"
              type="date"
              style="width: 100%"
            />
          </FormItemSearch>
        </el-row>

        <el-button type="primary" native-type="submit" @submit="search">
          搜索
        </el-button>
        <el-button @click="reset">重置</el-button>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <el-table :data="tableData" style="width: 100%">
        <TableColumnIndex :page="currentPage" :page-size="pageSize" />
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="date" label="充值数" />
        <el-table-column prop="ip" label="赛事类型" />
        <el-table-column prop="ip" label="充值时间" />
        <el-table-column prop="ip" label="充值账号" />
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        hide-on-single-page
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        small
      />
    </el-card>
  </div>
</template>
